import { Button, buttonVariants } from "@/components/ui/button";
import MaxWidthWrapper from "./MaxWidthWrapper"
import Link from "next/link"
import { ArrowRight } from "lucide-react";

const NavBar = () => {
  const user = undefined;
  const isAdmin = false;
  return (
    <nav className="sticky z-[100] h-14 inset-x-0 top-0 w-full border-b border-gray-200 bg-white/75 background-blur-lg transition-all">
      <MaxWidthWrapper>
        <div className="flex h-14 justify-between items-center border-b border-zinc-200">
          <Link href={'/'} className="flex z-40 font-semibold">
            case <span className="text-green-600">cobra</span>
          </Link>

          <div className="h-full flex items-center space-x-4">  
            {user ? (
              <>
                <Link href='/api/auth/logout' className={buttonVariants({
                  size: 'sm',
                  variant: 'ghost'
                })}>
                  Sign out
                </Link>
                {
                  isAdmin ?
                  <Link href='/api/auth/logout' className={buttonVariants({
                    size: 'sm',
                    variant: 'ghost'
                  })}>
                    Dashboard
                  </Link> : null
                }
                <Link href='/configure/upload' className={buttonVariants({
                    size: 'sm',
                    className: 'hidden sm:flex items-center gap-1'
                  })}>
                    Create case 
                    <ArrowRight className="ml-1.5 h-5 w-5" />
                  </Link>
              </>
            ) : (
              <>
                <Link href='/api/auth/register' className={buttonVariants({
                  size: 'sm',
                  variant: 'ghost'
                })}>
                  Sign up
                </Link>
                
                <Link href='/api/auth/login' className={buttonVariants({
                    size: 'sm',
                    className: 'hidden sm:flex items-center gap-1'
                  })}>
                    Login 
                  </Link>
                  <div className="h-8 w-px bg-zinc-200 hidden sm:block" />
                  <Link href='/configure/upload' className={buttonVariants({
                    size: 'sm',
                    className: 'hidden sm:flex items-center gap-1'
                  })}>
                    Create case 
                    <ArrowRight className="ml-1.5 h-5 w-5" />
                  </Link>
              </>
            )}
          </div>

        </div>
      </MaxWidthWrapper>
    </nav>
  )
}

export default NavBar